<template>
  <view class="watermark-remover">
    <view class="page-header">
      <view class="header-title">视频去水印</view>
      <view class="header-desc">去除抖音、快手等平台视频水印</view>
    </view>

    <view class="content-container">
      <!-- 链接输入区域 -->
      <view class="input-section">
        <view class="input-title">粘贴视频分享链接</view>
        <view class="input-wrapper">
          <u--input
            v-model="videoLink"
            placeholder="请粘贴视频分享链接"
            border="surround"
            clearable
            @clear="clearResult"
          ></u--input>
        </view>
        <view class="tips">支持抖音、快手、小红书等平台的分享链接</view>
        <button class="parse-btn" @tap="parseVideoHandler" :disabled="isProcessing || !videoLink">
          <text v-if="!isProcessing">解析视频</text>
          <u-loading-icon v-else size="24" mode="circle" color="#FFFFFF"></u-loading-icon>
        </button>
      </view>

      <!-- 解析结果区域 -->
      <view class="result-section" v-if="videoInfo.url">
        <view class="result-title">解析结果</view>
        
        <!-- 视频预览 -->
        <view class="video-preview">
          <video 
            :src="videoInfo.url" 
            class="video-player" 
            controls
            object-fit="cover"
          ></video>
        </view>
        
        <!-- 视频信息 -->
        <view class="video-info" v-if="videoInfo.title">
          <view class="info-title">{{ videoInfo.title }}</view>
          <view class="info-author" v-if="videoInfo.author">作者: {{ videoInfo.author }}</view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="action-btn download" @tap="downloadVideo">保存视频</button>
          <button class="action-btn share" @tap="shareVideo">分享</button>
          <button class="action-btn copy" @tap="copyVideoLink">复制链接</button>
        </view>
      </view>

      <!-- 使用说明 -->
      <view class="usage-guide">
        <view class="guide-title">使用说明</view>
        <view class="guide-steps">
          <view class="guide-step">
            <text class="step-num">1</text>
            <text class="step-desc">打开短视频平台App(抖音/快手等)</text>
          </view>
          <view class="guide-step">
            <text class="step-num">2</text>
            <text class="step-desc">点击要下载视频的分享按钮</text>
          </view>
          <view class="guide-step">
            <text class="step-num">3</text>
            <text class="step-desc">选择"复制链接"选项</text>
          </view>
          <view class="guide-step">
            <text class="step-num">4</text>
            <text class="step-desc">回到本页面粘贴链接并点击解析</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { parseVideo } from '../../api/video';
import type { VideoInfo as VideoInfoType } from '../../api/video';

// 视频链接
const videoLink = ref('');
// 处理状态
const isProcessing = ref(false);
// 视频信息
const videoInfo = reactive<VideoInfoType>({
  url: '',
  title: '',
  author: '',
  platform: '',
  coverUrl: '',
  duration: 0
});

// 解析视频
const parseVideoHandler = () => {
  if (!videoLink.value) {
    uni.showToast({
      title: '请输入视频链接',
      icon: 'none'
    });
    return;
  }
  
  isProcessing.value = true;
  
  // 提取链接中的URL部分
  const urlPattern = /(https?:\/\/[^\s]+)/;
  const match = videoLink.value.match(urlPattern);
  
  // 如果找到URL，只使用URL部分；否则使用整个文本
  const processedLink = match ? match[0] : videoLink.value;
  
  console.log('原始输入:', videoLink.value);
  console.log('处理后的链接:', processedLink);
  
  // 调用API解析视频
  parseVideo(videoLink.value)
    .then((res: any) => {
      isProcessing.value = false;
      console.log('API响应:', res);
      
      if (res.code === 200 && res.data) {
        // 解析成功
        const responseData = res.data;
        videoInfo.url = responseData.url || '';
        videoInfo.title = responseData.title || '未知标题';
        videoInfo.author = responseData.author || '未知作者';
        videoInfo.platform = responseData.platform || '未知平台';
        videoInfo.coverUrl = responseData.coverUrl || '';
        videoInfo.duration = responseData.duration || 0;
        
        uni.showToast({
          title: '解析成功',
          icon: 'success'
        });
      } else {
        // 解析失败
        const errorMsg = res.message || '解析失败，请检查链接是否正确';
        console.error('解析失败:', errorMsg);
        
        uni.showToast({
          title: errorMsg,
          icon: 'none'
        });
      }
    })
    .catch((err) => {
      isProcessing.value = false;
      console.error('解析视频失败:', err);
      uni.showToast({
        title: '网络请求失败，请稍后重试',
        icon: 'none'
      });
    });
};

// 下载视频
const downloadVideo = () => {
  if (!videoInfo.url) return;
  
  uni.showLoading({
    title: '保存中...'
  });
  
  // 保存视频到相册
  uni.downloadFile({
    url: videoInfo.url,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveVideoToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.hideLoading();
            uni.showToast({
              title: '视频已保存到相册',
              icon: 'success'
            });
          },
          fail: (err) => {
            uni.hideLoading();
            console.error('保存视频失败:', err);
            
            if (err.errMsg.includes('auth deny')) {
              // 用户拒绝授权
              uni.showModal({
                title: '提示',
                content: '需要您授权保存到相册',
                confirmText: '去设置',
                success: (res) => {
                  if (res.confirm) {
                    uni.openSetting();
                  }
                }
              });
            } else {
              uni.showToast({
                title: '保存失败，请重试',
                icon: 'none'
              });
            }
          }
        });
      } else {
        uni.hideLoading();
        uni.showToast({
          title: '下载失败，请重试',
          icon: 'none'
        });
      }
    },
    fail: () => {
      uni.hideLoading();
      uni.showToast({
        title: '下载失败，请重试',
        icon: 'none'
      });
    }
  });
};

// 分享视频
const shareVideo = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  });
};

// 复制视频链接
const copyVideoLink = () => {
  if (!videoInfo.url) return;
  
  uni.setClipboardData({
    data: videoInfo.url,
    success: () => {
      uni.showToast({
        title: '链接已复制',
        icon: 'success'
      });
    }
  });
};

// 清除结果
const clearResult = () => {
  videoInfo.url = '';
  videoInfo.title = '';
  videoInfo.author = '';
  videoInfo.platform = '';
  videoInfo.coverUrl = '';
  videoInfo.duration = 0;
};
</script>

<style>
.watermark-remover {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 40rpx;
}

.header-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.header-desc {
  font-size: 28rpx;
  color: #666;
}

.content-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 40rpx;
}

.input-section {
  margin-bottom: 40rpx;
}

.input-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.input-wrapper {
  margin-bottom: 20rpx;
}

.tips {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.parse-btn {
  width: 100%;
  height: 90rpx;
  background-color: #7EB9FF;
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.parse-btn[disabled] {
  background-color: #ccc;
  color: #fff;
}

.result-section {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.result-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.video-preview {
  width: 100%;
  margin-bottom: 20rpx;
}

.video-player {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  background-color: #000;
}

.video-info {
  margin-bottom: 30rpx;
}

.info-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.4;
}

.info-author {
  font-size: 24rpx;
  color: #666;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10rpx;
  border: none;
}

.action-btn:first-child {
  margin-left: 0;
}

.action-btn:last-child {
  margin-right: 0;
}

.download {
  background-color: #7EB9FF;
  color: #fff;
}

.share {
  background-color: #A6C1FF;
  color: #fff;
}

.copy {
  background-color: #f0f0f0;
  color: #666;
}

.usage-guide {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.guide-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.guide-step {
  display: flex;
  align-items: center;
}

.step-num {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #7EB9FF;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.step-desc {
  font-size: 28rpx;
  color: #666;
}
</style> 